<template>
	<view class="page">
		<view class="poster-wrap flex">
			<view class="teamer">
				<view class="teamer__list flex" v-if="members.length > 0">
					<view class="item flex" v-for="item in members">
						<view class="avatar">
							<image :src="item.avatar"></image>
						</view>
						<view class="nickname">{{ item.nickname }}</view>
						<view class="logintime">{{ item.last_time }}</view>
					</view>
					
					<view class="loadedall">已全部加载</view>
				</view>
				<view class="empty" v-else>
					<u-empty
						mode="data"
						:textSize="28"
						:iconSize="120"
						text="还没有队员,快去推广吧~"
					>
					</u-empty>
				</view>
			</view>
			
			<view class="tips">
				<view class="tips__header flex">
					<view class="line"></view>
					<view class="title">推广攻略</view>
					<view class="line"></view>
				</view>
				<view class="tips__content">
					<view class="item">1、点击右上角分享给好友</view>
					<view class="item">2、好友注册成功后将自动成为你的队员</view>
					<view class="item">3、邀请加入的队员越多将会获得更多优惠</view>
					<view class="item">4、方天下国际旅游保留法律许可范围内的最终解释权</view>
				</view>
				
				<view class="download-poster flex" v-if="posterImg">
					<view class="btn" @click="savePoster()">下载海报</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { teammembers } from '@/api/api.js'
	import config from '@/utils/config'
	export default {
		data() {
			return {
				spread_uid: uni.getStorageSync('ftxUserId') || 0,
				members: [],
				posterImg: ''
			};
		},
		onShareAppMessage: function () {
			return {
			  title: config.appName,
			  path: `/pages/index/index?spread_uid=${this.spread_uid}`,
			  // imageUrl: '' // 没有图则默认将本页缩略图
			}
		},
		onShareTimeline: function () {
			return {
			  title: config.appName,
			  page: `/pages/index/index`,
			  query: 'spread_uid='+this.spread_uid,
			  //imageUrl: ''
			}
		},
		mounted() {
			uni.showLoading({
				title: '加载中...'
			})
			teammembers().then( res => {
				uni.hideLoading()
				this.members = res.data || []
			})
		},
		methods: {
			savePoster() {
				console.log(this.posterImg)
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	.poster-wrap {
		background: #fff;
		width: 750rpx;
		height: calc(100vh - 44px);
		flex-direction: column;
		color: #333;
		.teamer {
			flex-grow: 1;
			margin: 30rpx 0;
			&__list {
				flex-direction: column;
				height: 55vh;
				overflow-y: scroll;
				padding: 20rpx 30rpx;
				.item {
					align-items: center;
					margin-bottom: 30rpx;
					.avatar {
						margin-right: 30rpx;
						width: 100rpx;
						height: 100rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}
					.nickname {
						margin-right: 20rpx;
						width: 200rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
					.logintime {
						flex: 1;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
				.loadedall {
					text-align: center;
					font-size: 24rpx;
					color: #999;
				}
			}
		}
		.tips {
			height: 35vh;
			flex-grow: 0;
			&__header {
				font-size: 32rpx;
				padding: 20rpx 0;
				justify-content: center;
				align-items: center;
				.line {
					height: 4rpx;
					width: 120rpx;
					border-radius: 10rpx;
					background-color: #333;
				}
				.title {
					margin: 0 16rpx;
				}
			}
			&__content {
				padding: 10rpx 30rpx 20rpx 30rpx;
				.item {
					margin-bottom: 18rpx;
				}
			}
			
			.download-poster {
				justify-content: center;
				.btn {
					background-color: #2d6b30;
					color: #fff;
					padding: 16rpx 36rpx;
					border-radius: 20rpx;
				}
			}
		}
		
	}
}
</style>
